<template>
    <el-dialog v-dialogDrag :title="!dataForm.menuId ? '新增' : '修改'" :close-on-click-modal="false"
        :visible.sync="visible" @close="handleClose" :center="true">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="80px">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="dataForm.name" placeholder="请输入角色名称"></el-input>
            </el-form-item>

            <el-form-item label="角色编码" prop="code">
                <el-input v-model="dataForm.code" placeholder="请输入角色编码"></el-input>
            </el-form-item>

            <el-form-item label="选择用户">
                <el-select v-model="dataForm.users" multiple filterable clearable placeholder="请选择" style="width:100%">
                    <el-option v-for="item in typeOptions" :key="item.userId" :label="item.userName"
                        :value="item.userId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色类型" prop="roleType">
                <el-select v-model="dataForm.roleType" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色描述" prop="description ">
                <el-input v-model="dataForm.description " placeholder="请输入角色描述"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
    import API from '@/api';
    import cloneDeep from 'lodash/cloneDeep';
    export default {
        data() {
            return {
                typeOptions: [],
                roleOptions: [{
                        value: '0',
                        label: '含管理权限(可授权)'
                    },
                    {
                        value: '1',
                        label: '普通角色(不可授权)'
                    },
                    {
                        value: '6',
                        label: '超级管理员'
                    }
                ],
                visible: false,
                dataForm: {
                    description: '',
                    name: '',
                    users: [],
                    status: 1,
                    code: '',
                    roleType: ''
                },
                appId: '',
                dataRule: {
                    name: [{
                        required: true,
                        message: '角色名称不能为空',
                        trigger: 'blur'
                    }],
                    code: [{
                        required: true,
                        message: '角色编码不能为空',
                        trigger: 'blur'
                    }],
                    roleType: [{
                        required: true,
                        message: '请选择角色类型',
                        trigger: 'blur'
                    }],
                    users: [{
                        required: true,
                        message: '请选择用户',
                        trigger: 'change'
                    }]
                },
                dialogType: 1
            };
        },
        methods: {
            handleClose() {
                this.dataForm = {
                    description: '',
                    name: '',
                    users: [],
                    status: 1,
                    code: '',
                    roleType: ''
                };
                this.$refs['dataForm'].resetFields();
            },
            getList(appId) {
                API.role.getRoleUserList({
                    appId: appId
                }).then((res) => {
                    console.log(res);
                    this.typeOptions = res.data;
                });
            },
            init(item, type, appId) {
                this.visible = true;
                this.getList(appId);
                this.appId = appId;
                this.dialogType = type;
                if (item && type == 2) {
                    this.dataForm = item;
                    this.dataForm['roleType'] = String(item.roleType)
                }
            },

            // 表单提交
            dataFormSubmit() {
                console.log(this.dataForm.users);
                this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        var newUser = [];
                        var users = this.dataForm.users;
                        var typeOptions = this.typeOptions;
                        if (users && users.length > 0) {
                            for (var k in users) {
                                for (var y in typeOptions) {
                                    if (users[k] == typeOptions[y].userId) {
                                        typeOptions[y]['appId'] = this.appId;
                                        newUser.push(typeOptions[y]);
                                    }
                                }
                            }
                        }

                        let params = cloneDeep(this.dataForm);
                        if (this.dialogType == 1) {
                            params['instId'] = this.$store.state.user.instId;
                            params['instSub'] = this.$store.state.user.instSub;
                            params['appId'] = this.appId;
                        }
                        if (this.dialogType == 2) {
                            delete params['createtime']
                        }

                        params['users'] = newUser;
                        var tick = this.dialogType == 1 ? API.role.addRole(params) : API.role.editRole(params);
                        tick.then((data) => {
                            if (data.code == 20000000) {
                                this.$message({
                                    message: `${this.dialogType == 2 ? '修改成功' : '新增成功'}`,
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.visible = false;
                                        this.$emit('refreshDataList');
                                    }
                                });
                            }
                        });
                    }
                });
            }
        }
    };
</script>